<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 v-html 示例</title>
    <!-- 引入 Vue 3 库 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <!-- 使用 v-html 指令渲染 test 变量的内容 -->
        <!-- <div v-html="test"></div> -->
        <!-- 使用 v-html 指令渲染 test2 变量的内容 -->
        <div v-html="test2"></div>
    </div>
    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    test: `
                        <!-- 恶意构造的svg标签XSS攻击 -->
<svg/onload=alert('XSS')>

<!-- 利用javascript伪协议 -->
<a href="javascript:alert(document.cookie)">查看详情</a>

<!-- 事件处理器注入 -->
<div onclick="alert('XSS')">正常内容</div>

<!-- CSS表达式攻击（旧版IE有效） -->
<div style="width: expression(alert('XSS'))"></div>
                    `,
                    test2: `

<p><span style="color: rgb(0, 0, 0);">&lt;!-- 恶意构造的svg标签XSS攻击 --&gt; &lt;svg/onload=alert('XSS')&gt; &lt;!-- 利用javascript伪协议 --&gt; &lt;a href="javascript:alert(document.cookie)"&gt;查看详情&lt;/a&gt; &lt;!-- 事件处理器注入 --&gt; &lt;div onclick="alert('XSS')"&gt;正常内容&lt;/div&gt; &lt;!-- CSS表达式攻击（旧版IE有效） --&gt; &lt;div style="width: expression(alert('XSS'))"&gt;&lt;/div&gt;</span></p><p><br></p><p><span style="color: rgb(0, 0, 0);">师德师风搭嘎</span></p><p><img style="" data-href="" alt="" src="http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/ajax/17460972758790.6708047938793289.jpg"></p>
                
                `
                }
            }
        }).mount('#app');


    </script>
</body>
</html>
